<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>曲线修改</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>
    <form class="layui-form" action="">

        <div class="layui-form" lay-filter="">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>曲线修改</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">曲线名称:</label>
                <div class="layui-input-inline" style="width:160px">
                    <select id="curvename" class="from-control" lay-filter="curvename" class="layui-select"
                        lay-search></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字段别名:</label>
                <div class="layui-input-inline" style="width: 160px;">
                    <input type="text" id="parametercn" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="margin-top: 12px;">
                    <span id="curveinfo" style="font-size: 16px;"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">内部点颜色:</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" placeholder="请选择颜色" autocomplete="off" readonly class="layui-input"
                        id="insidecolor">
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="test1"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">最外点颜色:</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" placeholder="请选择颜色" autocomplete="off" readonly class="layui-input"
                        id="outercolor">
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="test2"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 140px;">是否在工具面上显示:</label>
                <div class="layui-input-block">
                    <input type="checkbox" id="showstatus" lay-skin="primary" title="显示">
                </div>
            </div>
        </div>

    </form>
    <script type="text/javascript" src="../../jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../layui/public.js"></script>
    <script type="text/javascript" src="../../index.js"></script>
    <script type='text/javascript'>
        var $;
        var form;
        var dataslist;
        var colorpicker;
        layui.use(['form', 'colorpicker'], function () {
            $ = layui.$;
            form = layui.form;
            colorpicker = layui.colorpicker;

            //身份验证
            if (getoken != false) {

                //曲线名称的监听事件
                form.on('select(curvename)', function (data) {
                    var vs = $("#curvename option:checked").val();
                    for (var i = 0; i < dataslist.length; i++) {
                        if (vs == dataslist[i].curvename) {
                            $("#parameter").val(dataslist[i].parameter);
                            $("#parametercn").val(dataslist[i].parametercn);
                            document.getElementById("curveinfo").innerText = "(" + dataslist[i].tablename + ":" + dataslist[i].parameter + ")";

                            $('#insidecolor').val(dataslist[i].insidecolor);
                            $('#outercolor').val(dataslist[i].outercolor);
                            //内部点颜色
                            colorpicker.render({
                                elem: '#test1'
                                , color: dataslist[i].insidecolor
                                , done: function (color) {
                                    $('#insidecolor').val(color);
                                }
                            });

                            //外部点颜色
                            colorpicker.render({
                                elem: '#test2'
                                , color: dataslist[i].outercolor
                                , done: function (color) {
                                    $('#outercolor').val(color);
                                }
                            });

                            if (dataslist[i].showstatus == true) {
                                $('#showstatus').prop("checked", true);
                            } else {
                                $('#showstatus').prop("checked", false);
                            }
                        }
                        form.render(); //更新全部 
                    }
                })
            }
        });

        function CurveData(datas) {
            dataslist = datas;
            $("#curvename").empty();
            $("#curvename").append("<option value=''>请选择</option>")
            for (let i = 0; i < datas.length; i++) {
                $("#curvename").append("<option value=" + datas[i].curvename + ">" + datas[i].curvename + "</option>")
            }
            form.render();
        }
    </script>

</body>

</html>